import React, { Component } from 'react';
import styles from './index.less';
import {Icon} from 'antd';
import { connect } from 'react-redux';
import { actionTypes } from './store/index'
import { Link } from 'react-router-dom';
import { NoData } from '../common/noData';
class ListWrapper extends Component {
  hasMore(hasNextPage,index){
    if(hasNextPage){
      return <a className={styles.loadMore} onClick= {() => getMoreArticle(hasNextPage,index+1)}>阅读更多</a>
    }else{
      return <a className={styles.loadMore} >暂无更多数据</a>
    }
  } 
  render() {
    const { articles,hasNextPage,index } = this.props;
    if (articles && articles.length !=0 ){
      return(
        <div className={styles.ListWrapper}>
          <ul>
          { 
            articles.map((item) =>{
              return(
                  <li key={item.id} >
                    <Link to={'/detail?id=' + item.id} className={ styles.clearfix}>
                      <span className={styles.imgItem}><img alt='ico' src={ item.url }/></span>
                      <div className={styles.articleContent}>
                        <span className={styles.title}>{ item.title }</span>
                        <p className={styles.article}>{ item.article }</p>
                      </div>
                    </Link>
                    <div className={styles.meta}>
                          <span>{item.author}</span>
                          <span><Icon type="message" /></span>
                          <span><Icon type="heart"/></span>
                          <span><Icon type="star"/></span>
                    </div>
                  </li>
              )}
            )
            }
          </ul>
          { this.hasMore(hasNextPage,index) }
        </div>
      )}
    return <NoData/>
    }; 
  componentDidMount(){
    const { index } = this.props;
    console.log("this.props",this.props)
    return this.props.getArticle(index);
  }
};

const mapStateToProps = (state) =>{
  return{
    articles:state.home.homeArticles,
    index:state.home.page,
    hasNextPage:state.home.hasNextPage,
  }
};
const mapDispatch = (dispatch) =>{
  return{ 
    getArticle(index){

      dispatch(actionTypes.getArticleData(index))
    },
    getMoreArticle(hasNextPage,index){
      dispatch(actionTypes.getArticleData(hasNextPage,index))
    },
  }
};



export default connect(mapStateToProps,mapDispatch)(ListWrapper);